<template>
	<div class="houseDetail">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="detailSwiper">
			<HeaderSwiper :swiperData="swiperData"/>
		</div>
		<div class="houseDetailCont">
			<div class="houseDetailTitle">
				<p>
					<span>{{ this.$route.params.community }}</span>
				</p>
				<p>
					<img src="../../assets/images/shouye/icon_jubao@2x.png" alt="">
					<span>虚假举报</span>
				</p>
			</div>
			<div class="housePrice">
				<ul>
					<li>
						<span>{{ this.$route.params.price }}/月</span>
						<span>租金</span>
					</li>
					<li>
						<span>{{ this.$route.params.introduce }}</span>
						<span>房型</span>
					</li>
					<li>
						<span>{{ this.$route.params.area }}m2</span>
						<span>面积</span>
					</li>
				</ul>
			</div>
			<div class="houseIntroduce">
				<span>楼层：底层（共6层）</span>
				<span>装修：精装修</span>
				<span>类型：普通住宅</span>
				<span>朝向：西南</span>
				<span>年代：2000</span>
			</div>
		</div>
		<div class="houseContact">
				<ul>
					<li>
						<img src="../../assets/images/shouye/img_kefu@2x.png" alt="">
						<p>
							<span><i>李娜</i><br/>宜居客服</span>
						</p>
					</li>
					<li>
						<span>微聊</span>
					</li>
					<li>
						<span>电话</span>
					</li>
				</ul>
			</div>
	</div>
</template>
<script>
import NewsHeader from '../../components/shopheader'
import HeaderSwiper from './components/headerswiper'
export default {
	name:'houseDetail',
	components:{
		NewsHeader,
		HeaderSwiper
	},
	data(){
		return{
			dataArr:{
				isInput:false,
				iconArr:[
					{
						iconLeft:"icon-zuojiantou",
						iconRight:"icon-sangedian"
					}
				],
				placeholder:"",
				aimUrl:'/homecurrent',
				rightUrl:''
			},
			swiperData:[
				require("../../assets/images/shouye/img_tu@2x.png"),
				require("../../assets/images/shouye/img_tu@2x.png"),
				require("../../assets/images/shouye/img_tu@2x.png"),
				require("../../assets/images/shouye/img_tu@2x.png"),
				require("../../assets/images/shouye/img_tu@2x.png")
			]
		}
	}
}
</script>
<style scoped lang="less">
.houseDetail{
	width: 100%;
	height: 1334 / 100rem;
	padding-top:88 / 100rem;
	box-sizing: border-box; 
	overflow: hidden;
	.detailSwiper{
		width: 100%;
		height: 619 / 100rem;
	}
	.houseDetailCont{
		width: 100%;
		height: 546 / 100rem;
		padding: 0 20 / 100rem;
		box-sizing: border-box;
		position: relative;
		.houseDetailTitle{
			// position: relative;
			p:nth-child(1){
				position: absolute;
				left: 20 / 100rem;
				top: 47 / 100rem;
				span{
					font-size: 34 / 100rem;
					color: rgba(0, 0, 0, 0.8);
					font-weight: 600;
				}
			}
			p:nth-child(2){
				text-align: center;
				margin: 0 auto;
				position: absolute;
				right: 20 / 100rem;
				top: 36 / 100rem;
				img{
					width: 42 / 100rem;
					height: 42 / 100rem;
					display: inline-block;
					right: 20 / 100rem;
				}
				span{
					display: block;
					margin-top: 10 / 100rem;
					font-size: 30 / 100rem;
					font-weight: 400;
				}
			}
		}
		.housePrice{
			width: 710 / 100rem;
			height: 100 / 100rem;
			border-radius: 8 / 100rem;
			box-shadow: 0 0 14 / 100rem 14 / 100rem rgba(0, 0, 0, 0.1);
			position: absolute;
			top:143 / 100rem;
			ul{
				width: 100%;
				height: 100 / 100rem;
				li{	
					text-align: center;
					float: left;
					span:nth-child(1){
						display: block;
						font-weight:600;
						font-size: 34 / 100rem;
						color: #ff5555;
						margin-top: 16 / 100rem;
					}
					span:nth-child(2){
						display: inline-block;
						color: rgba(0, 0, 0, 0.8);
						font-size: 30 / 100rem;
						font-weight: 400;
						margin-top: 18 / 100rem;
					}
				}
				li:nth-child(1){
					margin-left: 10 / 100rem;
				}
				li:nth-child(2){
					margin-left: 130 / 100rem;
					margin-right: 147 / 100rem; 
				}
			}
		}
		.houseIntroduce{
			width: 710 / 100rem;
			position: absolute;
			top:283 / 100rem;
			span{
				display: inline-block;
				color: rgba(0, 0, 0, 0.8);
				font-size: 30 / 100rem;
			}
			span:nth-child(1){
				position: absolute;
				top: 0;
				left: 0;
			}
			span:nth-child(2){
				position: absolute;
				right: 93 / 100rem;
			}
			span:nth-child(3){
				position:absolute;
				left: 0;
				top:80 / 100rem;
			}
			span:nth-child(4){
				position: absolute;
				top:80 / 100rem;
				right: 126 / 100rem;
			}
			span:nth-child(5){
				position: absolute;
				top: 144 / 100rem;
				left: 0;
			}
		}
	}
	.houseContact{
		width: 100%;
		height: 80 / 100rem;
		display: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		ul{
			width: 100%;
			height: 100%;
			border-top:1px solid #ff5555; 
			li{
				height: 80 / 100rem;
				float: left;
				text-align: center;
				p{
					float: left;
					height: 80 / 100rem;
					padding-top: 10 / 100rem;
					padding-left: 23 / 100rem;
					text-align: left;
					box-sizing: border-box;
					span{
						font-size: 20 / 100rem;
						i{
							font-size: 30 / 100rem;
						}
					}
					
				}
				img{
					float: left;
					margin-left: 20 / 100rem;
					margin-top: 9 / 100rem;
					width: 62 / 100rem;
					height: 62 / 100rem;
				}
			}
			li:nth-child(1){
				width: 270 / 100rem;
				height: 100%;
			}
			li:nth-child(2){
				width: 240 / 100rem;
				height: 100%;
				line-height: 80 / 100rem;
				background-color: #ff8132;
				span{
					font-size: 34 / 100rem;
					font-weight: 700;
					color: #fff;
				}
			}
			li:nth-child(3){
				float: right;
				width: 240 / 100rem;
				height: 100%;
				line-height: 80 / 100rem;
				background-color: #ff3330;
				span{
					font-size: 34 / 100rem;
					font-weight: 700;
					color: #fff;
				}
			}
		}
	}
}	
</style>